<template>
  <div style="height: 100%">
    <div v-if="list.length > 0" class="music-list">
      <MusicListTime
        :history="list"
        @updateList="updateList"
        pageName="playList"
      />
    </div>
    <div v-else class="noResult">
      <span>这里什么也没有~</span>
    </div>
  </div>
</template>
<script setup>
import { onBeforeMount, ref } from "vue"
import MusicListTime from "../../components/MusicListTime/MusicListTime.vue"
import { useListStore } from "../../store/list.js"
import { getPlaylistDetail } from "../../api/index"

const list = ref([])
const listStore = useListStore()

const updateList = (data) => {
  list.value = data
}

onBeforeMount(async () => {
  let historyPlayList = JSON.parse(localStorage.getItem("playList")) || []
  if (historyPlayList.length > 0) {
    list.value = historyPlayList
  } else {
    let tmp = []
    const response = await getPlaylistDetail(3778678)
    tmp = response.data.playlist.tracks.slice(0, 100).map((item) => {
      let duration = item.duration || item.dt
      let date = new Date(duration)
      let m = date.getMinutes()
      let s = date.getSeconds()
      let time = `${m.toString().padStart(2, "0")}:${s
        .toString()
        .padStart(2, "0")}`
      return {
        album: item.album?.name || item.al?.name,
        duration: time,
        id: item.id,
        image: item.album?.artist.img1v1Url || item.al?.picUrl,
        name: item.name,
        singer: item.artists?.[0].name || item.ar?.[0]?.name,
      }
    })
    listStore.setPlayList(tmp)
    list.value = listStore.playList
  }
})
</script>
<style scoped lang="less">
.noResult {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: 14px;
  color: hsla(0, 0%, 100%, 0.6);
}
</style>
